$(function(){
    // 分析
    // 第一步。存获取搜索框的内容，进行非空判断trim()去除字符串左右的空格
    // 第二步，在存之前要先获取已经存在的数据转为数组
    // 第三步再把获取到的内容存到数组中
    // 第四步再把数组存到LOcalstorage
    
    // 第五步要显示所有的搜索记录
    
    // // 创建一个节点
    // var li = `<li>inval</li>`
    // //在父节点中添加
    // $('#list').append(li)
    getAllData()
    $('#btn').click(function(){
        // 获取到inpout的值
        let val = $('#input').val()
        // 判断值是否为空
        if(val==''){
            return;
        }
        //存到数组中
        let arr = [];
        // 判断之前的是否有没有数据
        let name = localStorage.getItem('name');
        if(name != null){
            arr = JSON.parse(name)
        }
        // 将input的值添加到数组中
        arr.unshift(val);
        // 将数组存回去
        localStorage.setItem('name',JSON.stringify(arr));
        //清空数组
        $('#input').val('')

        getAllData()
    })

     //显示所有的搜索记录
   function getAllData(){
    let name = localStorage.getItem("name");
    let arr=[];
    if(name!=null){
       arr= JSON.parse(name);
    }
    let str = "";
    for(let i=0;i<arr.length;i++){
         str += `<li>${ arr[i]}</li>`;
    }

    $('#list').html(str)
   }


    // 删除功能
    $('#delbtn').click(function(){
        if(confirm('你确定要删除吗？')){
            localStorage.clear();
            $('#list').html('')
        }
    })
})


    
